<template>
  <div class="have">
    <div v-for="(item, index) in list" :key="index" class="item" @click="showChoice(index)">
      <div>
        <img :src="src[item.type - 1]">
        <div class="text">{{item.sys_name}}</div>
      </div>
    </div>
    <van-popup style="width: 100%" v-for="(item, index) in list" :key="'p'+index" v-model="show"
               v-if="index === showNum"
               position="bottom">
      <div @click="clickRoute(index)">
        <van-nav-bar
          title="管理"
        />
      </div>
      <div @click="clickA('0' + index)">
        <van-nav-bar
          title="使用"
        />
      </div>
      <div @click="deleteSys(item.id)">
        <van-nav-bar
          title="删除"
        />
      </div>
      <div @click="closeChoice">
        <van-nav-bar
          title="取消"
        />
      </div>
      <a :href="'http://new.ujnxgzx.com/system/' + type_name[item.type - 1] + '/#/?sid=' + item.id" :id="'0' + index" target="_blank"></a>
      <router-link
        :to="{path: path[item.type-1], query:{sid: item.id, type_id: item.type, sys_name: item.sys_name}}" :id="index">
      </router-link>
    </van-popup>
    <div style="clear: both;height: 0;"></div>
  </div>
</template>

<script>
  import {Dialog, Popup, NavBar} from 'vant';

  export default {
    name: "DocumentHave",
    components: {
      [Dialog.name]: Dialog,
      [Popup.name]: Popup,
      [NavBar.name]: NavBar,
    },
    data() {
      return {
        list: [],
        path: ['DocumentExam', '/DocumentScore'],
        src: [require("@/assets/icon/Exam.png"), require("@/assets/icon/Score.png")],
        show: false,
        showNum: -1,
        type_name: ['exam', 'vote']
      }
    },
    methods: {
      getData() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.get(_this.apiUrl("user/users/getMySystem"), {headers: {'token': token}})
          .then((res) => {
            // console.log(res.data);
            _this.list = res.data.data;
          });
      },
      deleteSys: function (id) {
        let _this = this;
        Dialog.confirm({
          title: '您确定要删除吗？',
        }).then(() => {
          let token = _this.getCookie("token");
          let data = _this.$qs.stringify({
            'id': id
          });
          _this.$http.delete(_this.apiUrl('user/users/delSystem'), {data: data, headers: {'token': token}})
            .then((res) => {
              // console.log(res.data);
              _this.getData();
            });
        }).catch(() => {
        });
      },
      showChoice(index) {
        let _this = this;
        _this.show = true;
        _this.showNum = index
      },
      closeChoice() {
        let _this = this;
        _this.show = false;
      },
      clickRoute(index) {
        document.getElementById(index).click();
      },
      clickA(index){
        document.getElementById(index).click();
      }
    },
    mounted() {
      let _this = this;
      _this.getData();
    }
  }
</script>

<style scoped>
  .item {
    float: left;
    width: 20%;
    margin: 2.5%;
  }

  .item .text {
    width: 100%;
    height: 37.3px;
    text-align: center;
    font-size: 14px;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
<style>
  .have .van-nav-bar {
    height: 50px;
    line-height: 50px;
  }
</style>
